<template>
	<view class="page_wrapper">
		<Narbar title="试题展示" />
		<view class="pagebox">
			<view class="calc_list_block">
				<view class="calc" v-for="(calc, index) in calcList" :key="index">
					{{calc.firstNum}} {{calc.calcType}} {{calc.secondNum}} = 
				</view>
			</view>
			<image class="showimg" src="../../static/nimg/mathshowbg.png" mode=""></image>
		</view>
		<view class="bottom_btns_block">
			<view class="fcz_btn online_btn" @click="onlineCalcs()">在线测试</view>
			<!-- <view class="fcz_btn download_btn" @click="downloadCalcs()">下载试题</view> -->
		</view>
		<image class="page_bg_img" src="../../static/nimg/bg.png" mode=""></image>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import Narbar from '@/components/navbar.vue'
	export default {
		components:{
			Narbar
		},
		data() {
			return {
				examId: 0,
				calcList: [],
				type:1
			}
		},
		onLoad(option) {
			this.examId = option.examId
			this.type = option.ten
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				let that = this
				that.calcList = JSON.parse(uni.getStorageSync('test_id'))
				uni.hideLoading()
			},
			onlineCalcs() {
				let that = this
				uni.showLoading()
				uni.removeStorageSync('test_id')
				request.postJson("/topicRecord/create", {
					title: this.type==1?'口算出题-100以内':'口算出题-1000以内'
				}).then(res=>{
					if(res.code ===200 && res.result){
						that.examId = res.result
						uni.setStorageSync(String(res.result),JSON.stringify(that.calcList))
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/mathCalcs/onlineTest?examId=' + that.examId
						})
					}
				})
				
			},
			downloadCalcs() {
				const filePathNew = new Date().getTime() +'.jpeg'
				
				// uni.showLoading()
				// 校验今天是否已没有下载次数
				
			}
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	.pagebox{
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 4;
		top: 160rpx;
		overflow: hidden;
		height: calc(100% - 400rpx);
	}
	.calc_list_block{
		flex: 1;
		z-index: 5;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		align-content: flex-start;
		overflow: scroll;
		justify-content: center;
		font-size: 30rpx;
		color: #074F1E;
		row-gap: 30rpx;
		column-gap: 20rpx;
		margin: 50rpx 40rpx 120rpx 40rpx;
		.calc{
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.showimg{
		position: absolute;
		width: calc(100% - 110rpx);
		padding: 20rpx;
		height: 100%;
	}
	.bottom_btns_block{
		position: fixed;
		bottom: 80rpx;
		z-index: 4;
		display: block;
		.fcz_btn{
			height: 98rpx;
			color: white;
			font-size: 40rpx;
			background-color:#2E996C;
			border-radius: 50rpx;
		}
		.online_btn{
			flex: 1;
			margin: 0 auto;
		}
		.download_btn{
			flex: 1;
		}
	}
}
</style>
